<template>
  <div :class="[item.config.class, 'flex-normal']">
    <template v-if="item.config['model'] == 'appModel3'">
      <template v-if="shopType != 4">
        <div class="btn-item poster-btn flex-center" :prop-data="getModelItemConfig('title')" 
          :style="{
            'font-family': setAttr(item['posterBtn'], 'fontFamily'),
            'font-size': item['posterBtn'] ? $px2rem(`${item['posterBtn'].configH5['fontSize']}px`) : '',
            'color': setAttr(item['posterBtn'], 'color'),
          }" @click.stop="editModel(item['posterBtn'])">
          {{ setAttr(item['posterBtn'], 'text')}}
        </div>
      </template>
      <div :class="['btn-item buy-btn flex-center', shopType == 4 && 'bs']" :prop-data="getModelItemConfig('title')" 
        :style="{
          'font-family': setAttr(item['buyBtn'], 'fontFamily'),
          'font-size': item['buyBtn'] ? $px2rem(`${item['buyBtn'].configH5['fontSize']}px`) : '',
          'color': setAttr(item['buyBtn'], 'color'),
        }" @click.stop="editModel(item['buyBtn'])">
        {{ shopType == 4 ? '立即兑换' : setAttr(item['buyBtn'], 'text')}}
      </div>
    </template>
    <template v-if="item.config['model'] == 'appModel5'">
      <template v-if="shopType != 4">
        <div class="btn-item poster-btn flex-center" :prop-data="getModelItemConfig('title')" 
          :style="{
            'font-family': setAttr(item['posterBtn'], 'fontFamily'),
            'font-size': item['posterBtn'] ? $px2rem(`${item['posterBtn'].configH5['fontSize']}px`) : '',
            'color': setAttr(item['posterBtn'], 'color'),
          }" @click.stop="editModel(item['posterBtn'])">
          {{ setAttr(item['posterBtn'], 'text') }}
        </div>
      </template>
      <div :class="['btn-item buy-btn flex-center', shopType == 4 && 'bs']" :prop-data="getModelItemConfig('title')" 
        :style="{
          'font-family': setAttr(item['buyBtn'], 'fontFamily'),
          'font-size': item['buyBtn'] ? $px2rem(`${item['buyBtn'].configH5['fontSize']}px`) : '',
          'color': setAttr(item['buyBtn'], 'color'),
        }" @click.stop="editModel(item['buyBtn'])">
        {{ shopType == 4 ? '立即兑换' : setAttr(item['buyBtn'], 'text')}}
      </div>
    </template>
  </div>
</template>

<script>
import mixin from '../mixin'
import { submitModel } from '@/formgen/components/FormConfig/model-config'
import { mapGetters } from 'vuex'
export default {
  name: 'DSubmit',
  mixins: [mixin],
  computed: {
    ...mapGetters(['shopType']),
  },
  data(){
    return {
      submitModel: JSON.parse(JSON.stringify(submitModel)),
    }
  },
  mounted(){
    this.$set(this.item, 'isHiddenBtn', true)
  },
  methods: {
    setAttr(config, key){
      if(!config) return null
      return config.configH5[key]
    },
    getModelItemConfig(key){
      let _self = this
      let {model} = _self.item.config
      let config = _self.submitModel[model][key]
      _self.$set(_self.item, key, config)
    },
    editModel(item){
      this.$emit('edit-model', item)
    }
  },
}
</script>

<style scoped lang="scss">
  .app-model-3.submit-model{
    position: relative;
    padding-top: rem(50);
    .btn-item{
      height: rem(78);
      flex: 1;
      &.poster-btn{
        background-color: #2D2C2A;
        border-radius: rem(39) 0 0 rem(39);
      }
      &.buy-btn{
        background: linear-gradient(to right, #D1A971, #F2DFB6);
        border-radius: 0 rem(39) rem(39) 0;
      }
      &.bs{
        border-radius: rem(39) !important;
      }
    }
  }
  .app-model-5.submit-model{
    position: relative;
    padding-top: rem(50);
    .btn-item{
      height: rem(78);
      flex: 1;
      &.poster-btn{
        background: linear-gradient(to bottom, #FDF7E8, #E2C67F);
      }
      &.buy-btn{
        background: linear-gradient(to bottom, #47A5E3, #1964B3);
        border-radius: 0 rem(39) rem(39) 0;
      }
      &.bs{
        border-radius: rem(39) !important;
      }
    }
  }
</style>
